<!--
 * @Description: 事件详情
 * @Author: JiangMing
 * @Date: 2021-09-2 16:42:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-2 16:42:00
-->
<template>
  <view class="page">
    <view class="detail">
      <!-- 基础信息 -->
      <view class="event-base">
        <view class="event-base__head">
          <EventLevelBar :level="detail.eventLevel" />
          <EventStatusBar :state="detail.status" class="status" />
        </view>
        <view class="event-base__info">
          <view class="title">{{ detail.eventName }}</view>
          <view class="event-base__foot">
            <text class="tag">{{ detail.eventType }}</text>
            <view class="date">
              <image src="@/static/images/time.png" mode="aspectFit" class="date-icon" />
              <text class="date-text">{{ detail.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 详情 -->
      <view class="detail-content">
        <DetailTab v-model="tabKey" :list="tabList">
          <ContentBase v-if="tabKey == 1" :eventId="detail.id" />
          <ContentParameter v-if="tabKey == 2" :eventId="detail.id" />
          <ContentTask v-if="tabKey == 3" :eventId="detail.id" />
        </DetailTab>
      </view>
    </view>
    <view class="page-footer">
      <button class="btn-primary-plain" @click="resourceReport('record')">需求上报记录</button>
      <button class="btn-primary" @click="resourceReport('add')">需求信息上报</button>
    </view>
  </view>
</template>

<script>
import EventLevelBar from '@/components/eventLevelBar';
import EventStatusBar from '@/components/eventStatusBar';
import DetailTab from '@/components/detailTab';
import ContentBase from './components/content-base.vue';
import ContentParameter from './components/content-parameter.vue';
import ContentTask from './components/content-task.vue';

export default {
  components: {
    EventLevelBar,
    EventStatusBar,
    DetailTab,
    ContentBase,
    ContentParameter,
    ContentTask
  },
  data() {
    return {
      tabList: [
        { label: '基础信息', value: '1' },
        { label: '影响参数', value: '2' },
        { label: '关联任务', value: '3', badge: 4 },
      ],
      tabKey: '1',
      detail: {
        id: '104',
        eventLevel: 1,
        eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
        eventType: '洪涝',
        createTime: '2021-12-12  12:20:12',
        status: '1',
        task: 4,
      },
    }
  },
  watch: {
    tabKey(val) {
      console.log(val)
    }
  },
  methods: {
    resourceReport(type) {
      if (type == 'add') {
        uni.navigateTo({
          url: '/pages/resourceReport/index?eventId=' + this.detail.id
        })
      }
      if (type == 'record') {
        uni.navigateTo({
          url: '/pages/resourceReport/record?eventId=' + this.detail.id
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx 32rpx 200rpx 32rpx;
  .detail {
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 3px 15px rgba(44, 121, 247, 0.2);
  }
  .event-base {
    padding: 0 32rpx 32rpx 32rpx;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    .event-base__head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .event-base__foot {
      display: flex;
      align-items: center;
    }
    .status {
      margin-top: 10rpx;
    }
    .title {
      font-size: 30rpx;
      color: #2B2B2B;
      margin-bottom: 20rpx;
      font-weight: 500;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
    .tag {
      display: inline-block;
      border-radius: 16rpx;
      background: rgba(50, 148, 255, 0.2);
      border: 1px solid #027aff;
      color: #027aff;
      padding: 0 16rpx;
      height: 32rpx;
      line-height: 30rpx;
      margin-right: 20rpx;
    }
    .date {
      color: rgba(43, 43, 43, .6);
      .date-icon {
        width: 24rpx;
        height: 24rpx;
        vertical-align: middle;
        margin-right: 10rpx;
      }
      .date-text {
        vertical-align: middle;
      }
    }
  }
  .detail-content {
    padding-bottom: 20rpx;
    box-shadow: 0px 3px 15px rgba(44, 121, 247, 0.2);
  }
  .page-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px -5px 10px rgba(44, 121, 247, 0.2);
    display: flex;
    justify-content: space-between;
    padding: 32rpx 10rpx;
    background-color: #fff;
    button {
      width: 50%;
      margin: 0 30rpx;
    }
  }
}
</style>